<template>
    <div>
   <el-checkbox-group v-model="vo">
    <el-checkbox label="计算机原理"></el-checkbox>
    <el-checkbox label="数据结构"></el-checkbox>
    <el-checkbox label="编译原理"></el-checkbox>
    <el-checkbox label="汇编语言"></el-checkbox>

    </el-checkbox-group>
    学生名称
    <el-input v-model="username" placeholder="请输入内容" style="width: 222px"></el-input>
  <el-button type="primary">查询</el-button>
  <el-button type="primary">添加</el-button>
  <el-button type="primary">批量删除</el-button>


   <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  


    </div>
</template>



<script>
  const cityOptions = ['计算机原理', '数据结构', '编译原理', '汇编语言'];

export default {
    //方法
    methods: {
       
        
    },
    //页面初始化 查询数据展示
    created() {
        
    },

    //数据初始化 保存页面需要的传递V-modle 对象
    data() {
        return {

       vo : ['计算机原理','数据结构'],
       username:""
            
        }
    },
    
    setup() {
        
    },
}
</script>